<template>
  <div class="t_box" :style="{height: state ? theight : '0px', overflow: !state ? 'hidden' : ''}">
    <div class="icon"></div>
    <div class="my_div" @click="toggle"></div>
    <div class="menu" :style="{width: (close ? '0px' : mwidth)}">
        <mItem v-for="menu in menus" :msg="menu" :key="menu.url"/>
    </div>
  </div>
</template>
<script>
import mItem from "./MItem";
export default {
  data() {
    return {
      close: true,
      mwidth: null,
      theight: null
    };
  },
  props: ["menus", "state"],
  components: {
    mItem
  },
  methods: {
    toggle() {
      this.close = !this.close;
    }
  },
  mounted() {
    var fs = parseFloat(
        window.getComputedStyle(document.documentElement)["fontSize"]
      )
    this.mwidth = 6 * fs + "px";
    this.theight = fs + "px"
  }
};
</script>
<style scoped>
.t_box {
  position: relative;
  width: 100%;
  height: 1rem;
  z-index: 2;
  background-color: #000;
  transition: all 0.3s;
  /* padding-top: 0.34rem; */
}
.icon {
  float: left;
  margin-left: 0.36rem;
  margin-top: 0.34rem;
  width: 0.71rem;
  height: 0.36rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("~@/assets/logo.png");
}
.my_div {
  float: right;
  /* padding: 0.34rem 0.36rem; */
  /* margin-right: 0.36rem;
  margin-top: 0.34rem; */
  width: 0.96rem;
  height: 1.02rem;
  background-size: 0.28rem 0.3rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("~@/assets/menu.png");
}
.menu {
  position: absolute;
  top: 0rem;
  right: 0rem;
  width: 6rem;
  height: 13rem;
  padding-top: 0.2rem;
  font-size: 0.3rem;
  color: #fff;
  z-index: 1;
  transition: all 0.3s;
  background-color: #1e252a;
  overflow: hidden;
}
.menu>div:nth-last-child(1){
  border: unset;
}
.router-link-exact-active{
  filter: brightness(1) !important;
}
</style>
